<template>
  <div class="editor">
    <div class="header">
      <div class="editor-header-title">
        <div class="home-btn" @click="goHome"></div>
        <span>{{docsEntity.name}}</span>
      </div>
    </div>
    <EditorPlus 
			ref="editorRef"
			:llm_url="llm_url"
			:llm_key="llm_key"
			:llm_model="llm_model"
			:export_api="export_api"
			:import_api="import_api"
      @change="onchange"
		/>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { EditorPlus } from '@/components/editor/index.ts'
import { marked } from 'marked';
import { templateApi } from '@/api/template';
import { genHtml2Png } from '@/utils/html2Img'

const route = useRoute()
const llm_url = import.meta.env.VITE_LLM_URL as string;
const llm_key = import.meta.env.VITE_LLM_KEY as string;
const llm_model = import.meta.env.VITE_LLM_MODEL as string;
const export_api = '/api/export'
const import_api = '/api/import'
const editorRef = ref<any>(null)

const docsEntity = ref<any>({})

const getDetail = async (id: number | string) => {
	try {
		const res = await templateApi.getTempDetail(id);
		if (res) {
			docsEntity.value = res;
			editorRef.value.setEditorContent(marked.parse(docsEntity.value.content || ''));
		} else {
			editorRef.value.setEditorContent('');
			console.error('获取详情失败:');
		}
	} catch (error) {
		console.error('请求错误:', error);
	};
}

const saveTimer = ref<NodeJS.Timeout | null>(null);
const isSaving = ref(false);
const onchange = async () => {
	if (isSaving.value) return;
    
    if (saveTimer.value) {
        clearTimeout(saveTimer.value);
    }
    
    isSaving.value = true;
    saveTimer.value = setTimeout(async () => {
        await autoSave();
        isSaving.value = false;
    }, 10000);
}

const autoSave = async () => {
	if (!docsEntity.value) {
		return;
	}
	try {
    let base64Str = await genHtml2Png(document.querySelector('.aie-container-main'))

		docsEntity.value.content = editorRef.value.getEditorContent('markdown');
		docsEntity.value.words = editorRef.value.getEditorWords();
		await templateApi.updateTemp(docsEntity.value.id, {...docsEntity.value, thumbnail: base64Str});
    showSaveTip()
	} catch (error) {
		console.error('自动保存失败:', error);
	}
}

const showSaveTip = () => {
    const appDiv = document.querySelector('#app')
    if (!appDiv) return;
    const saveTip = document.createElement('div')
    saveTip.textContent = '自动保存成功';
    saveTip.style.position = 'fixed';
    saveTip.style.bottom = '-12px';
    saveTip.style.right = '0';
    saveTip.style.transform = 'translate(-50%, -50%)';
    saveTip.style.color = '#67c23a';
    saveTip.style.fontSize = '14px';
    saveTip.style.zIndex = '9';
    saveTip.style.transition = 'opacity 0.5s';
    appDiv.appendChild(saveTip);
    
    // 2秒后淡出并移除
    setTimeout(() => {
        saveTip.style.opacity = '0';
        setTimeout(() => {
            appDiv.removeChild(saveTip);
        }, 500);
    }, 2000);
}

onMounted(() => {
	const { id } = route.params as { id: number | string };
	if (id) {
		getDetail(id)
	}
  window.addEventListener('beforeunload', autoSave);
});

// 组件卸载时清除定时器
onUnmounted(() => {
  autoSave()
	window.removeEventListener('beforeunload', autoSave);
})

const goHome = () => {
  window.close();
}
</script>
<style lang="less" scoped>
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 45px;
	padding: 0 20px;
	border-bottom: 1px solid #ebeef5;
}
.editor-header-title {
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  font-weight: 400;
  font-size: 20px;

  .home-btn {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 40px;
    background: url('@/assets/img/icon-home.png') no-repeat center / contain;
    cursor: pointer;
    transition: background-color 0.3s;
    
    &:hover {
      opacity: 0.8;
    }

    &:after {
      content: '';
      position: absolute;
      top: 58%;
      right: -20px;
      width: 1px;
      height: 20px;
      background-color: rgb(229, 231, 235);
      transform: translate(0, -50%);
    }
  }

  span{
    transform: translateY(1px);
  }
}

</style>